<template>
    <div class="mainbody">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item >{{ mainName }}</el-breadcrumb-item>
            <el-breadcrumb-item >{{facName}}</el-breadcrumb-item>
            <p>添加收货地址</p>
        </el-breadcrumb>
        <el-main>
            <!-- 新增地址 -->
            <div class="addAddressForm" v-if="routerFlag == 'addAddress'">
                <el-form ref="form" :model="addAddressForm" label-width="100px">
                    <el-form-item label="收货人姓名">
                        <el-input v-model="addAddressForm.userName"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="联系电话">
                        <el-input type="number" v-model="addAddressForm.number"></el-input>
                    </el-form-item> -->
                    <el-form-item label='地址信息:'>
                        <div class="chanceAddress">
                            <el-select v-model="addAddressForm.province" clearable placeholder="省" @change="seletekey($event, 'province')">
                            <el-option v-for="(val, key) in provinces" :key="key" :label="val" :value="val" />
                            </el-select>
                            <el-select v-model="addAddressForm.city" clearable placeholder="市" @change="seletekey($event, 'city')">
                            <el-option v-for="(val, key) in citys" :key="key" :label="val" :value="val" />
                            </el-select>
                            <el-select v-model="addAddressForm.area" clearable placeholder="区" @change="seletekey($event, 'area')">
                            <el-option v-for="(val,key) in areas" :key="key" :label="val" :value="val" />
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item label="详细地址">
                        <el-input v-model="addAddressForm.address" placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addressAdd">添加</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
                <el-form ref="form" label-width="100px">
                    <el-form-item>
                        <el-table :data="message" border style="width: 100%;">
                            <el-table-column
                            prop="id"
                            label="id"
                            top="40px">
                            </el-table-column>
                            <el-table-column
                            prop="userName"
                            label="用户名"
                            top="40px">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="地址"
                            >
                            </el-table-column>
                            <el-table-column
                                fixed="right"
                                label="操作"
                                width="100">
                                <template slot-scope="scope">
                                    <el-button @click="deleteAddress(scope.$index)" type="text" size="small">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-form>
            </div>
        </el-main>
        
    </div>
</template>
  <script>
  import { pcaa } from 'area-data'
  import {addGoodsAddress,userInfo,findGoodsAddress,deleteGoodsAddress  } from "../ajax/get"
//   import {addGoodsOrder} from "../ajax/post"
//   import defaultValue from "../utils/defalutValue"
  export default {
      name: "AddressPage",
      data () {
          return {
            mainName:"全部功能",
            facName:"收获地址",
            routerFlag: "addAddress",
            addAddressForm:{},//添加新的收获地址对象
            getAddressForm:{},//获取收获地址对象
            message:[],//获取收获地址信息
            userName:"",
            goodsAddress:"",
            pcaaData: pcaa,// 区域数据
            provinces: pcaa['86'],
            citys: [],
            areas: [],
            goodsAddress:"",
            address:"",
            nickName:'',
            message:[],
            getId:[],//获取收货地址的id
          };
      },
      methods: {
        addAddress() {
            this.routerFlag = "addAddress";
        },
        getAddress(){
            this.routerFlag ="getAddress" ;
        },
        // 查找用户信息
        findUserInfo(userName) {
            userInfo(userName).then(res => {
                console.log("用户信息:",res);
                this.nickName = res.data.data.nickName;
                this.userName = res.data.data.userName;
                //获取购物地址
                 findGoodsAddress(res.data.data.userName).then(adr =>{
                    console.log("获取的地址",adr);
                    this.message = adr.data.data;
                    console.log("获取的单条地址",this.message);
                })
            })
        },
        // 删除地址
        deleteAddress(index) {
            console.log(index,"==",this.message[index].id);
            deleteGoodsAddress(this.message[index].id).then(res =>{
                console.log("删除的地址",res);
                this.$message(res.data.msg)
                this.findUserInfo(sessionStorage.getItem("userName"));
            })
            // this.$message(delAdr.data.msg);
            // rows.splice(index, 1);
        },
        seletekey(e, type) {
            if (e) {
                switch (type) {
                case 'province':
                    Object.keys(this.provinces).filter(item => {
                    if (this.provinces[item] === e) {
                        this.citys = this.pcaaData[item]
                    }
                    })
                    break
                case 'city':
                    Object.keys(this.citys).filter(item => {
                    if (this.citys[item] === e) {
                        this.areas = this.pcaaData[item]
                    }
                    })
                    break
                case 'area':
                    break
                }
            }
        },
        //新增地址
        addressAdd(userName) {
            let goodsAddress ="";
            console.log("===",this.addAddressForm);
            goodsAddress=this.addAddressForm.province+this.addAddressForm.city+this.addAddressForm.area+this.addAddressForm.address;
            userName=sessionStorage.getItem("userName");
            addGoodsAddress(goodsAddress,userName).then(res => {
                console.log("新添地址",res);
            }).then(()=>{
                // this.findUserInfo(sessionStorage.getItem("userName"));
            })
            // console.log('submit!');
        },
        
      },
      created() {
        this.findUserInfo(sessionStorage.getItem("userName"));
      }
  }
  </script>
  
  <style scoped>
    @import "../assets/css/personalHomepage.css";
  </style>